<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" 
    class="toggle-all" 
    v-model="isAll" 
    type="checkbox" />
    <label for="toggle-all"></label>
    <!--第一步 绑定键盘按下事件 enter 按下时触发 enterFun
        第二步 进行双向绑定  -->
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="enterFun"
      v-model.trim="taskStr"
    />
  </header>
</template>

<script>
export default {
  props: {
    list: {
      /* 定义数据类型 */
      type: Array,
      /* 必须传参 */
      require: true,
    },
  },
  data() {
    return {
      taskStr: "",
    };
  },
  methods: {
    enterFun() {
      if (this.taskStr === "") return alert("任务框内不能为空哦");
      this.$emit("enter", this.taskStr);
      this.taskStr = "";
    },
  },
  /* 计算属性 全选按钮 */
  computed: {
    isAll: {

      get() {
        /* 当返回值为true时，isAll为true */
        return this.list.every((item) => item.isDone);
      },
      /* 当全选按钮状态发生改变时 触发 */
      set(val){
        this.$emit('isAll',val)
      }
    },
  },
};
</script>